<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
		 rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="../../assetsimages/x-icon/agricul.png">
		<link rel="stylesheet" href="../../assets/css/relys/animate.css">
		<link rel="stylesheet" href="../../assets/css/relys/bootstrap.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/all.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/icofont.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/lightcase.css">
		<link rel="stylesheet" href="../../assets/css/relys/swiper.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/style.css">
		<style type="text/css">
			.shop-thumb {
				height: 0;
				padding-top: 100%;
				position: relative;
				overflow: hidden;
			}
			
			.shop-thumb img {
				width: 100%;
				position: absolute;
				top: 0;
				object-fit: cover;
				height: 100%;
				left: 0;
			}
			.description img{
				width: 100%;
			}
			.job-info-container {
				background: linear-gradient(to bottom right, #ffffff, #f8f9ff);
				border-radius: 15px;
				padding: 30px;
				box-shadow: 0 10px 30px rgba(94, 114, 235, 0.1);
				border: 1px solid rgba(94, 114, 235, 0.1);
				position: relative;
				overflow: hidden;
			}

			.job-info-container::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 4px;
				background: linear-gradient(90deg, #5e72eb, #ff6b6b);
			}

			.job-header {
				border-bottom: 1px solid rgba(94, 114, 235, 0.1);
				padding-bottom: 20px;
				margin-bottom: 25px;
				position: relative;
			}

			.job-title {
				font-size: 26px;
				color: #2c3e50;
				margin-bottom: 15px;
				font-weight: 600;
				background: linear-gradient(120deg, #5e72eb, #ff6b6b);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				display: inline-block;
			}

			.company-info h4 {
				display: inline-block;
				color: #4a5568;
				font-size: 18px;
				font-weight: 500;
				padding-left: 15px;
				margin-left: 15px;
				border-left: 2px solid #5e72eb;
			}

			.job-meta {
				display: flex;
				flex-direction: column;
				gap: 15px;
				padding: 20px;
				background: rgba(94, 114, 235, 0.03);
				border-radius: 12px;
				margin: 20px 0;
			}

			.info-item {
				display: flex;
				align-items: center;
				padding: 12px 20px;
				background: white;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(94, 114, 235, 0.05);
				transition: all 0.3s ease;
				width: 100%;
			}

			.info-item:hover {
				transform: translateX(5px);
				box-shadow: 0 4px 12px rgba(94, 114, 235, 0.1);
			}

			.info-label {
				min-width: 100px;
				color: #718096;
				font-size: 15px;
				position: relative;
				padding-left: 20px;
				margin-right: 20px;
				flex-shrink: 0;
			}

			.info-value {
				color: #2d3748;
				font-size: 15px;
				font-weight: 500;
				flex-grow: 1;
			}

			.requirements {
				margin-top: 25px;
				padding: 25px;
				background: linear-gradient(to right bottom, #f8f9ff, #ffffff);
				border-radius: 12px;
				border: 1px solid rgba(94, 114, 235, 0.1);
			}

			.requirements h5 {
				color: #2c3e50;
				margin-bottom: 15px;
				font-weight: 600;
				display: inline-block;
				padding-bottom: 8px;
				border-bottom: 2px solid #5e72eb;
			}

			.requirements p {
				color: #4a5568;
				line-height: 1.8;
				margin: 0;
				padding: 0;
			}

			.rating {
				display: flex;
				gap: 25px;
				margin: 25px 0;
				padding: 15px;
				background: white;
				border-radius: 30px;
				box-shadow: 0 2px 10px rgba(94, 114, 235, 0.08);
			}

			.rating span {
				display: flex;
				align-items: center;
				color: #718096;
				transition: all 0.3s ease;
				padding: 8px 15px;
				border-radius: 20px;
			}

			.rating span:hover {
				color: #5e72eb;
				background: rgba(94, 114, 235, 0.1);
			}

			.job-actions {
				display: flex;
				gap: 20px;
				margin-top: 30px;
				padding-top: 20px;
				border-top: 1px dashed rgba(94, 114, 235, 0.2);
			}

			.action-button {
				padding: 12px 30px;
				border-radius: 25px;
				border: none;
				cursor: pointer;
				font-weight: 500;
				transition: all 0.3s ease;
				flex: 1;
			}

			.apply-btn {
				background: linear-gradient(45deg, #5e72eb, #ff6b6b);
				color: white;
				box-shadow: 0 4px 15px rgba(94, 114, 235, 0.2);
			}

			.apply-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 20px rgba(94, 114, 235, 0.3);
			}

			.collect-btn {
				background: white;
				color: #5e72eb;
				border: 2px solid rgba(94, 114, 235, 0.2);
			}

			.collect-btn:hover {
				background: rgba(94, 114, 235, 0.1);
				border-color: #5e72eb;
				color: #5e72eb;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- Page Header Section Start Here -->
			<section class="page-header bg_img padding-tb">
				<div class="overlay"></div>
				<div class="container">
					<div class="page-header-content-area">
						<h4 class="ph-title">招聘信息详情</h4>
						<ul class="agri-ul">
							<li><a href="../../index.html">首页</a></li>
							<li><a class="active">招聘信息详情</a></li>
						</ul>
					</div>
				</div>
			</section>
			<!-- Page Header Section Ending Here -->
			<!-- Shop Page Section start here -->
			<section class="shop-single padding-tb">
				<div class="container">
					<div class="row justify-content-center">
						<div class="col-lg-10 col-12 sticky-widget">
							<div class="product-details">
								<div class="row">
									<div class="col-md-6 col-12">
									    <div class="product-thumb">
									        <div class="swiper-container gallery-top">
									            <div class="swiper-wrapper">
									                <div class="swiper-slide" v-for="(item, i) in swiperList" :key="i">
									                    <div class="shop-item">
									                        <div class="shop-thumb">
									                            <img :src="item" alt="shop-single">
									                        </div>
									                    </div>
									                </div>
									            </div>
									            <div class="shop-navigation d-flex flex-wrap">
									                <div class="shop-nav shop-slider-prev"><i class="icofont-simple-left"></i></div>
									                <div class="shop-nav shop-slider-next"><i class="icofont-simple-right"></i></div>
									            </div>
									        </div>
									    </div>
									</div>
									<div class="col-md-6 col-12">
										<div class="job-info-container">
											<div class="job-header">
												<h3 class="job-title">{{detail.zhaopingangwei}}</h3>
												<div class="company-info">
													<h4>{{detail.qiyemingcheng}}</h4>
												</div>
											</div>
											
											<div class="job-meta">
												<div class="info-item">
													<span class="info-label">企业编号</span>
													<span class="info-value">{{detail.qiyebianhao}}</span>
												</div>
												<div class="info-item">
													<span class="info-label">负责人</span>
													<span class="info-value">{{detail.fuzeren}}</span>
												</div>
												<div class="info-item">
													<span class="info-label">联系电话</span>
													<span class="info-value">{{detail.lianxidianhua}}</span>
												</div>
												<div class="info-item">
													<span class="info-label">招聘人数</span>
													<span class="info-value">{{detail.zhaopinrenshu}}人</span>
												</div>
												<div class="info-item">
													<span class="info-label">岗位类别</span>
													<span class="info-value">{{detail.gangweileibie}}</span>
												</div>
												<div class="info-item">
													<span class="info-label">学历要求</span>
													<span class="info-value">{{detail.xueli}}</span>
												</div>
											</div>

											<div class="requirements">
												<h5>岗位要求</h5>
												<p>{{detail.gangweiyaoqiu}}</p>
											</div>

											<div class="rating">
												<span @click="onThumbsUp(1)" style="cursor: pointer">
													<i class="fas fa-thumbs-up"></i>
													赞 {{detail.thumbsupnum}}
												</span>
												<span @click="onThumbsUp(2)" style="cursor: pointer">
													<i class="fas fa-thumbs-down"></i>
													踩 {{detail.crazilynum}}
												</span>
											</div>

											<div class="job-actions">
												<button v-if="buttons.includes('应聘')" 
														@click="onCrossTap('yingpinxinxi')" 
														class="action-button apply-btn">
													立即应聘
												</button>
												<button @click="onStoreTap" 
														class="action-button collect-btn">
													收藏职位
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="review">
								<ul class="agri-ul review-nav">
									<li class="desc active" data-target="description-show">详情</li>							
									<li :class="['rev', !hsdetail?'active':'']" data-target="review-content-show">评论 {{comments.length}}</li>
								</ul>
								<div :class="['review-content', hsdetail?'description-show':'review-content-show']">
									<div class="description" v-html="detail.gongzuozhize"></div>
									<div class="review-showing">
									    <ul class="agri-ul content">
									        <li v-for="(item, i) in comments" :key="i">
									            <div class="post-thumb">
									                <img src="../../assets/images/author.jpg" alt="shop">
									            </div>
									            <div class="post-content">
									                <div class="entry-meta">
									                    <div class="posted-on">
									                        <a>******</a>
									                    </div>
									                </div>
									                <div class="entry-content">
									                    <p>{{item.content}}</p>
									                </div>
									            </div>
									        </li>
									    </ul>
									    <div class="client-review">
									        <div class="review-form">
									            <div class="review-title">
									                <h5>您的评论</h5>
									            </div>
									            <form @submit.prevent="onCommentTap" class="row">
									                <div class="col-md-12 col-12">
									                    <textarea v-model="comment" rows="8" placeholder="请填写评论"></textarea>
									                </div>
									                <div class="col-12">
									                    <button class="defult-btn" type="submit">提交</button>
									                </div>
									            </form>
									        </div>
									    </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<script src="../../assets/js/relys/jquery.js"></script>
		<script src="../../assets/js/relys/fontawesome.min.js"></script>
		<script src="../../assets/js/relys/waypoints.min.js"></script>
		<script src="../../assets/js/relys/bootstrap.min.js"></script>
		<script src="../../assets/js/relys/wow.min.js"></script>
		<script src="../../assets/js/relys/jquery.countdown.min.js"></script>
		<script src="../../assets/js/relys/jquery.counterup.min.js"></script>
		<script src="../../assets/js/relys/isotope.pkgd.min.js"></script>
		<script src="../../assets/js/relys/lightcase.js"></script>
		<script src="../../assets/js/relys/vue.js"></script>
		<script src="../../assets/js/api/api.js"></script>
		<script src="../../assets/js/api/tplist.js"></script>
		<script src="../../assets/js/api/shop-cart.js"></script>
		<script src="../../assets/js/api/defaultuser.js"></script>
		<script src="../../assets/js/relys/utils.js"></script>
		<div id="script"></div>
	</body>
	<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					id: "",
					buynum: 1,
					detail: null,
					swiperList: [],
					curImg: '',
					hsdetail: false,
					comments: [],
					comment: "",
					buttons: [],
				},
				async created() {
					var frontmenus = JSON.parse(localStorage.getItem("daohangmenus"))
					if(typeof frontmenus == "object"){
						frontmenus.forEach(item => {
							if(item.menutable == "zhaopinxinxi"){
								this.buttons = item.buttons
							}
						})
					}
					var id = getParam('id')
					this.id = id
					
					this.hsdetail = true

					await this.getDetail(id)
					this.getComments()
					var scripts = [
						"../../assets/js/relys/swiper.min.js",
						"../../assets/js/relys/functions.js"
					]
					setTimeout(() => {
						scripts.forEach(ele => {
							var new_element=document.createElement("script");
							new_element.setAttribute("type","text/javascript");
							new_element.setAttribute("src",ele);// 在这里引入了a.js
							$('#script').append(new_element);
						})
					}, 500)
				},
				methods: {
					download(file){
					  window.open(file)
					},
					buynumDec(){
						if(this.buynum!=1){
							this.buynum--
						}
					},
					buynumInc(){
						this.buynum++
					},
					getSession(){
						return new Promise((resolve) => {
							var tablename = localStorage.getItem("sessionTable")
							session(`${tablename}`, (data) => {
								if(data&&data.code==0){
									resolve(data.data)
								}
							})
						})
					},
					addCart(){
						var _this = this;
						console.log(localStorage.getItem(`cart${this.detail.id}`));
						if (localStorage.getItem(`cart${this.detail.id}`)) {
							alert('该商品已添加到购物车')
							return
						}
						cartSave({
							tablename: 'zhaopinxinxi',
							goodid: this.detail.id,
							goodname: this.detail.zhaopingangwei,
							picture: this.swiperList[0],
							buynumber: this.buynum,
							price: this.detail.price,
							discountprice: this.detail.price
						}, function(res) {
							localStorage.setItem(`cart${_this.detail.id}`, true);
							alert('添加到购物车成功')
						});
					},
					onBuyTap() {
						let orderGoods = [];
						// 跳转到下单页面,需要购买的数据保存在缓存
						localStorage.setItem('orderGoods', JSON.stringify([{
							tablename: 'zhaopinxinxi',
							goodid: this.detail.id,
							goodname: this.detail.zhaopingangwei,
							picture: this.swiperList[0],
							buynumber: this.buynum,
							price: this.detail.price,
							discountprice: this.detail.price
						}]))
						// 跳转到支付页面
						window.location.href = '../order/confirm-order.html';
					},
					
					getDetail(id){
						return new Promise((resolve) => {
							goodsInfo('zhaopinxinxi',id, (res) => {
								this.detail = res.data
								this.$nextTick(() => {
									
									this.swiperList = []
									var arr = this.detail.tupian.split(',')
									arr.forEach(item => {
										this.swiperList.push(item)
									})
									this.curImg = this.swiperList[0]
									resolve(res)
								})
							})
						})
					},
					onCrossTap(tablename){
						localStorage.setItem("crossObj", JSON.stringify(this.detail))
						window.location.href = `../${tablename}/add.html?tablename=zhaopinxinxi`
					},
					async onStoreTap(){
						var user = await this.getSession()

						var data = {
							refid: this.detail.id,
							tablename: "zhaopinxinxi",
							userid: user.id,
							name: "",
							picture: ""
						}
							data.name = this.detail.zhaopingangwei
							data.picture = this.detail.tupian
						storeUpAdd("zhaopinxinxi", data, (res) => {
							if(res&&res.code==0){
								alert("收藏成功")
							}
						})
					},
					onThumbsUp(type){
						thumbsUp("zhaopinxinxi", this.detail.id, type, (res) => {
							if(res&&res.code==0){
								if(type==1){
									alert("点赞成功")
									this.getDetail(this.id)
								}else{
									alert("踩成功")
									this.getDetail(this.id)
								}
							}
						})
					},
					getComments(){
						commentList("zhaopinxinxi", this.detail.id, (res) => {
							if(res&&res.code==0){
								this.comments = res.data.list
							}
						})
					},

					async onCommentTap(){
						var user = await this.getSession()
						if(user){
							var data = {
								refid: this.detail.id,
								content: this.comment,
								userid: user.id 
							}
							addComment("zhaopinxinxi", data, (res) => {
								if(res&&res.code==0){
									alert("评论成功")
									this.getComments()
								}
							})
						}else{
							alert("评论失败")
						}
					},
				}
			})
	</script>
</html>
